<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>活动列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3498db;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 10px 15px;
      background-color: white;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px;
      border-radius: 20px;
      border: 1px solid #eee;
      background-color: #f8f9fa;
      font-size: 14px;
      outline: none;
    }
    
    /* 分类标签 */
    .category-tabs {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid #eee;
    }
    
    .category-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .category-tab {
      padding: 6px 12px;
      background-color: #f5f5f5;
      border-radius: 15px;
      font-size: 14px;
      margin-right: 8px;
      white-space: nowrap;
    }
    
    .category-tab.active {
      background-color: #3498db;
      color: white;
    }
    
    /* 活动列表容器 */
    .events-container {
      padding: 10px;
    }
    
    /* 活动项通用样式 */
    .event-item {
      background-color: white;
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    .event-status {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-right: 6px;
    }
    
    .status-upcoming {
      background-color: #e3f2fd;
      color: #1976d2;
    }
    
    .status-hot {
      background-color: #ffebee;
      color: #c62828;
    }
    
    .status-ending {
      background-color: #fff8e1;
      color: #f57c00;
    }
    
    .event-meta {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #666;
      margin-top: 8px;
    }
    
    .event-meta i {
      margin-right: 4px;
      font-size: 13px;
    }
    
    .event-meta span {
      margin-right: 12px;
    }
    
    .event-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-top: 1px solid #f0f0f0;
      font-size: 13px;
    }
    
    .event-participants {
      display: flex;
      align-items: center;
      color: #666;
    }
    
    .participant-avatars {
      display: flex;
    }
    
    .participant-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid white;
      margin-left: -8px;
      object-fit: cover;
    }
    
    .participant-avatar:first-child {
      margin-left: 0;
    }
    
    .participant-count {
      margin-left: 8px;
    }
    
    .event-action {
      color: #3498db;
      font-weight: 500;
    }
    
    /* 1. 多图活动样式 */
    .event-multi-image {
      position: relative;
    }
    
    .multi-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    
    .multi-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    .event-multi-content {
      padding: 15px;
    }
    
    .event-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
      line-height: 1.4;
    }
    
    .event-desc {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 2. 大图活动样式 */
    .event-single-image {
      position: relative;
    }
    
    .single-image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
    
    .single-image-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      padding: 15px;
      color: white;
    }
    
    .single-image-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .single-image-meta {
      display: flex;
      align-items: center;
      font-size: 12px;
      opacity: 0.9;
    }
    
    .single-image-meta span {
      margin-right: 12px;
      display: flex;
      align-items: center;
    }
    
    .single-image-meta i {
      margin-right: 4px;
    }
    
    .single-image-footer {
      background-color: white;
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
    }
    
    /* 3. 无图活动样式 */
    .event-no-image {
      padding: 15px;
    }
    
    .no-image-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    
    .no-image-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
    }
    
    /* 4. 左侧小图活动样式 */
    .event-side-image {
      display: flex;
    }
    
    .side-image {
      width: 35%;
      object-fit: cover;
    }
    
    .side-content {
      width: 65%;
      padding: 15px;
      display: flex;
      flex-direction: column;
    }
    
    .side-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px;
      line-height: 1.4;
    }
    
    .side-desc {
      font-size: 12px;
      color: #666;
      line-height: 1.4;
      margin-bottom: 8px;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 活动标签 */
    .event-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 8px 0;
    }
    
    .event-tag {
      background-color: #f0f7ff;
      color: #3498db;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">附近活动</h1>
    <button class="btn btn-link p-0 text-white">
      <i class="fa fa-filter"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-bar">
    <input type="text" class="search-input" placeholder="搜索活动、地点或标签...">
  </div>
  
  <!-- 分类标签 -->
  <div class="category-tabs">
    <div class="category-tab active">全部活动</div>
    <div class="category-tab">聚会</div>
    <div class="category-tab">运动</div>
    <div class="category-tab">音乐</div>
    <div class="category-tab">展览</div>
    <div class="category-tab">讲座</div>
    <div class="category-tab">美食</div>
    <div class="category-tab">公益</div>
  </div>
  
  <!-- 活动列表 -->
  <div class="events-container">
    <!-- 1. 多图活动 -->
    <div class="event-item">
      <div class="event-multi-image">
        <div class="multi-images">
          <img src="https://picsum.photos/300/300?random=10" alt="活动图片" class="multi-image">
          <img src="https://picsum.photos/300/300?random=11" alt="活动图片" class="multi-image">
          <img src="https://picsum.photos/300/300?random=12" alt="活动图片" class="multi-image">
        </div>
      </div>
      
      <div class="event-multi-content">
        <div>
          <span class="event-status status-hot">热门</span>
          <span class="event-title">城市露营音乐节 - 夏日特别场</span>
        </div>
        
        <div class="event-desc">
          一场融合音乐、露营与美食的夏日狂欢，邀请多位独立音乐人现场演出，提供特色美食和露营体验。
        </div>
        
        <div class="event-tags">
          <span class="event-tag">音乐</span>
          <span class="event-tag">露营</span>
          <span class="event-tag">美食</span>
        </div>
        
        <div class="event-meta">
          <span><i class="fa fa-calendar"></i> 6月15日 18:00</span>
          <span><i class="fa fa-map-marker"></i> 中央公园</span>
          <span><i class="fa fa-ticket"></i> ¥128起</span>
        </div>
      </div>
      
      <div class="event-footer">
        <div class="event-participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=1" alt="参与者" class="participant-avatar">
            <img src="https://picsum.photos/100/100?random=2" alt="参与者" class="participant-avatar">
            <img src="https://picsum.photos/100/100?random=3" alt="参与者" class="participant-avatar">
          </div>
          <div class="participant-count">128人参加</div>
        </div>
        <div class="event-action">报名参加</div>
      </div>
    </div>
    
    <!-- 2. 大图活动 -->
    <div class="event-item">
      <div class="event-single-image">
        <img src="https://picsum.photos/800/450?random=20" alt="活动图片" class="single-image">
        <div class="single-image-content">
          <div class="single-image-title">当代艺术展 - 未来与现实的边界</div>
          <div class="single-image-meta">
            <span><i class="fa fa-calendar"></i> 6月10日-30日</span>
            <span><i class="fa fa-map-marker"></i> 现代艺术馆</span>
          </div>
        </div>
      </div>
      
      <div class="single-image-footer">
        <div class="event-participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=4" alt="参与者" class="participant-avatar">
            <img src="https://picsum.photos/100/100?random=5" alt="参与者" class="participant-avatar">
          </div>
          <div class="participant-count">56人参加</div>
        </div>
        <div class="event-action">免费预约</div>
      </div>
    </div>
    
    <!-- 3. 无图活动 -->
    <div class="event-item">
      <div class="event-no-image">
        <div class="no-image-header">
          <div class="no-image-title">
            <span class="event-status status-upcoming">即将开始</span>
            线上读书会 - 科幻文学专题
          </div>
        </div>
        
        <div class="event-desc">
          本月读书会将聚焦科幻文学，讨论人工智能与未来社会的关系，欢迎所有科幻爱好者参与交流。
        </div>
        
        <div class="event-tags">
          <span class="event-tag">线上活动</span>
          <span class="event-tag">读书</span>
          <span class="event-tag">科幻</span>
        </div>
        
        <div class="event-meta">
          <span><i class="fa fa-calendar"></i> 6月12日 20:00</span>
          <span><i class="fa fa-laptop"></i> 腾讯会议</span>
          <span><i class="fa fa-ticket"></i> 免费</span>
        </div>
        
        <div class="event-footer" style="border-top: 1px solid #f0f0f0; margin-top: 10px;">
          <div class="event-participants">
            <div class="participant-avatars">
              <img src="https://picsum.photos/100/100?random=6" alt="参与者" class="participant-avatar">
              <img src="https://picsum.photos/100/100?random=7" alt="参与者" class="participant-avatar">
              <img src="https://picsum.photos/100/100?random=8" alt="参与者" class="participant-avatar">
              <img src="https://picsum.photos/100/100?random=9" alt="参与者" class="participant-avatar">
            </div>
            <div class="participant-count">32人参加</div>
          </div>
          <div class="event-action">我要参加</div>
        </div>
      </div>
    </div>
    
    <!-- 4. 左侧小图活动 -->
    <div class="event-item">
      <div class="event-side-image">
        <img src="https://picsum.photos/400/600?random=30" alt="活动图片" class="side-image">
        <div class="side-content">
          <div>
            <span class="event-status status-ending">即将结束</span>
            <div class="side-title">城市马拉松训练营 - 周末场</div>
          </div>
          
          <div class="side-desc">
            为即将到来的城市马拉松做准备，专业教练指导，适合各级跑者参与，提升跑步技巧和耐力。
          </div>
          
          <div class="event-tags">
            <span class="event-tag">运动</span>
            <span class="event-tag">跑步</span>
            <span class="event-tag">健康</span>
          </div>
          
          <div class="event-meta">
            <span><i class="fa fa-calendar"></i> 6月11日 07:30</span>
            <span><i class="fa fa-map-marker"></i> 奥林匹克公园</span>
          </div>
          
          <div class="event-footer" style="border-top: none; padding-top: 5px;">
            <div class="event-participants">
              <div class="participant-avatars">
                <img src="https://picsum.photos/100/100?random=13" alt="参与者" class="participant-avatar">
                <img src="https://picsum.photos/100/100?random=14" alt="参与者" class="participant-avatar">
              </div>
              <div class="participant-count">45人参加</div>
            </div>
            <div class="event-action">立即报名</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 5. 多图活动（2张图） -->
    <div class="event-item">
      <div class="event-multi-image">
        <div class="multi-images">
          <img src="https://picsum.photos/300/300?random=15" alt="活动图片" class="multi-image" style="grid-column: span 2;">
          <img src="https://picsum.photos/300/300?random=16" alt="活动图片" class="multi-image">
        </div>
      </div>
      
      <div class="event-multi-content">
        <div>
          <span class="event-title">手工陶艺工作坊 - 亲子专场</span>
        </div>
        
        <div class="event-desc">
          适合家长和孩子一起参与的陶艺创作活动，专业老师指导，完成的作品可带回家作为纪念。
        </div>
        
        <div class="event-tags">
          <span class="event-tag">亲子</span>
          <span class="event-tag">手工</span>
          <span class="event-tag">艺术</span>
        </div>
        
        <div class="event-meta">
          <span><i class="fa fa-calendar"></i> 6月18日 14:00</span>
          <span><i class="fa fa-map-marker"></i> 创意工坊</span>
          <span><i class="fa fa-ticket"></i> ¥98/家庭</span>
        </div>
      </div>
      
      <div class="event-footer">
        <div class="event-participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=17" alt="参与者" class="participant-avatar">
            <img src="https://picsum.photos/100/100?random=18" alt="参与者" class="participant-avatar">
          </div>
          <div class="participant-count">18组家庭</div>
        </div>
        <div class="event-action">预约位置</div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-calendar nav-icon"></i>
      <span>活动</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-plus-circle nav-icon"></i>
      <span>发布</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 分类标签切换
    const categoryTabs = document.querySelectorAll('.category-tab');
    categoryTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        categoryTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // 活动点击事件
    document.querySelectorAll('.event-item').forEach(event => {
      event.addEventListener('click', function(e) {
        // 忽略点击操作按钮的情况
        if (!e.target.classList.contains('event-action')) {
          const eventTitle = this.querySelector('.event-title, .single-image-title, .no-image-title').textContent.trim();
          alert(`查看活动详情: ${eventTitle}`);
        }
      });
    });
    
    // 报名按钮点击事件
    document.querySelectorAll('.event-action').forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.stopPropagation();
        const actionText = this.textContent;
        this.textContent = actionText === '已报名' ? '报名参加' : '已报名';
        this.style.color = actionText === '已报名' ? '#3498db' : '#2ecc71';
        
        // 更新参与人数
        const participantCount = this.closest('.event-item').querySelector('.participant-count');
        if (participantCount) {
          let countText = participantCount.textContent;
          let count = parseInt(countText.match(/\d+/)[0]);
          
          if (actionText === '已报名') {
            count--;
          } else {
            count++;
          }
          
          participantCount.textContent = countText.replace(/\d+/, count);
        }
      });
    });
  </script>
</body>
</html>